<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lifecycle</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            },

            //在对象内以属性（函数）的方式进行声明；生命周期函数不能使用箭头函数，箭头函数没有this

            //在实例初始化之后，数据观测（data observe）和event/watcher事件配置之前调用
            beforeCreate: function() {
                console.log("beforeCreated")
            },
            //实例创建完成之后立即调用
            //在这一步中，实例已经完成以下配置：数据观测（data observe），属性和方法的运算，watch/event事件回调
            //挂载阶段还未开始。$el属性还不可见
            created: function() {
                console.log("created")
            },
            //在挂载之前被调用，相关的渲染函数首次被调用
            beforeMount: function() {
                console.log("beforeMount")
            },

            //el被新创建的vm.$el取代，挂载成功
            mounted: function() {
                console.log("mounted")
            },
            //数据更新时调用
            beforeUpdate: function() {
                console.log("beforeUpdate")
            },
            //组件DOM已经更新，组件更新完毕
            updated: function() {
                console.log("updated")
            }
        })
        setTimeout(function() {
            vm.message = "change.."
        }, 2000)
    </script>
</body>

</html>